<!--
 * @Author: Zhong admin@51y.cc
 * @Description: $1
 * @FilePath: /tenement-admin/src/views/realEstateManage/building/roomAddEdit.vue
 * @LastEditTime: 2024-12-17 22:34:36
 * @LastEditors: Zhong
-->
<template>
  <el-dialog
    title="查看房屋"
    v-model="model"
    width="800px"
    :before-close="closeHandle"
  >
    <!-- 1. 详情页面 isDetail = true 编辑 isEdit = true
      2. 新增页面 isDetail = false 编辑 isEdit = true
      3. 编辑页面 isDetail = false 编辑 isEdit = true
  -->
    <el-form
      v-show="!isDetail"
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="单元" prop="unitNum">
        <el-select v-model="form.unitNum" placeholder="请选择">
          <el-option
            v-for="i in Number(building.totalUnitNum || 0)"
            :key="i"
            :label="`${i}单元`"
            :value="String(i)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在楼层" prop="layer">
        <el-select v-model="form.layer" placeholder="请选择">
          <el-option
            v-for="i in Number(building.floor || 0)"
            :key="i"
            :label="`${i}层`"
            :value="String(i)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房号" prop="roomNum">
        <el-input v-model="form.roomNum" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="房号" prop="roomNum">
        <el-input v-model="form.roomNum" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="朝向" prop="orientation">
        <el-select v-model="form.orientation" placeholder="请选择">
          <el-option label="东" value="东" />
          <el-option label="南" value="南" />
          <el-option label="西" value="西" />
          <el-option label="北" value="北" />
        </el-select>
      </el-form-item>
      <el-form-item label="建筑面积" prop="buildingArea">
        <el-input
          v-model="form.buildingArea"
          type="number"
          placeholder="请输入"
        >
          <template #suffix>
            <span>平方米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="套内面积" prop="roomArea">
        <el-input v-model="form.roomArea" type="number" placeholder="请输入">
          <template #suffix>
            <span>平方米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="公摊面积" prop="sharedArea">
        <el-input v-model="form.sharedArea" type="number" placeholder="请输入">
          <template #suffix>
            <span>平方米</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="房间户型" prop="section">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input v-model="form.section" type="number">
              <template #suffix>
                <span>室</span>
              </template>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input v-model="form.hall" type="number">
              <template #suffix>
                <span>厅</span>
              </template>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-input v-model="form.toilet" type="number">
              <template #suffix>
                <span>卫</span>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="房屋属性">
        <el-select
          v-model="form.housingProperty"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in housingPropertyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年租金">
        <el-input
          v-model="form.rent"
          type="number"
          placeholder="请输入"
          @blur="handleRentBlur"
        >
          <template #suffix>
            <span>元</span>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-descriptions border v-show="isDetail">
      <el-descriptions-item label="小区">{{
        form.communityName || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="区域">{{
        form.region || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{
        form.smallAddress || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="导入姓名">{{
        form.realName || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="房屋属性">{{
        form.housingProperty || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="单元">{{
        form.unitNum ? form.unitNum + "单元" : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="所在楼层">{{
        form.layer ? form.layer + "层" : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="房号">{{
        form.roomNum || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="朝向">{{
        form.orientation || ""
      }}</el-descriptions-item>
      <el-descriptions-item label="建筑面积">{{
        form.buildingArea ? form.buildingArea + "平方米" : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="套内面积">{{
        form.roomArea ? form.roomArea + "平方米" : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="公摊面积">{{
        form.sharedArea ? form.sharedArea + "平方米" : ""
      }}</el-descriptions-item>
      <el-descriptions-item label="年租金">
        {{ form.rent ? form.rent + "元" : "无" }}
      </el-descriptions-item>
      <el-descriptions-item label="房间户型">
        {{ form.section ? form.section + "室" : "" }}
        {{ form.hall ? form.hall + "厅" : "" }}
        {{ form.toilet ? form.toilet + "卫" : "" }}
      </el-descriptions-item>
    </el-descriptions>

    <Title> 收费项目 </Title>
    <!-- 收费列表 -->
    <el-table :data="feeList" border>
      <el-table-column
        prop="communityFeeConfigName"
        label="收费类型"
        align="center"
      />
      <el-table-column prop="amount" label="单价" align="center" />
      <el-table-column prop="unit" label="单位" align="center" />
    </el-table>
    <Title> 房屋成员 </Title>
    <el-table :data="memberList" border>
      <el-table-column prop="realName" label="姓名" align="center" />
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column prop="type" label="类型" align="center">
        <template #default="scope">
          {{ memberTypeMap[scope.row.type] }}
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:footer>
      <div>
        <el-button @click="closeHandle">取 消</el-button>
        <el-button type="primary" v-if="isDetail" @click="isDetail = false"
          >编 辑</el-button
        >
        <el-button v-if="!isDetail" type="primary" @click="submitForm"
          >保 存</el-button
        >
      </div>
    </template>
    <bindFee
      v-model="bindFeeModel"
      v-if="bindFeeModel"
      :ids="ids"
      :row="row"
      @submit="getFeeList"
    />
  </el-dialog>
</template>

<script setup name="roomAddEdit">
import { ref, reactive, toRaw } from "vue";
import { ElMessage } from "element-plus";
import bindFee from "@/views/realEstateManage/roomList/bindFee.vue";
import Title from "@/components/title/index.vue";
import { getCommunityMemberPage } from "@/api/realEstateManage";
import {
  saveBuildingRoom,
  updateBuildingRoom,
  getFloorPage,
  selectChargingItem,
} from "@/api/realEstateManage";
const props = defineProps({
  communityId: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  building: {
    type: Object,
    default: () => {},
  },
  row: {
    type: Object,
    default: () => {},
  },
});

const isDetail = defineModel("isDetail", {
  default: false,
});
const isEdit = computed(() => {
  return !!props.row.id;
});
const memberTypeMap = {
  0: "业主本人",
  1: "家人",
  2: "朋友",
  3: "租客",
};

const memberStatusMap = {
  0: "后台待审核",
  1: "业主待审核",
  2: "已审核",
  3: "拒绝",
};
const formRef = ref();

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});
const building = ref({});
const form = ref({
  communityId: "",
  floorId: null,
  floorName: "",
  roomNum: "",
  unitNum: "",
  layer: "",
  orientation: "",
  section: "",
  hall: "",
  toilet: "",
  buildingArea: "",
  roomArea: "",
  sharedArea: "",
  rent: "",
});

const rules = reactive({
  unitNum: [{ required: true, message: "请选择单元" }],
  layer: [{ required: true, message: "请选择层数" }],
  roomNum: [{ required: true, message: "请输入房号" }],
  orientation: [{ required: true, message: "请选择朝向" }],
  buildingArea: [{ required: true, message: "请输入建筑面积" }],
  roomArea: [{ required: true, message: "请输入套内面积" }],
  sharedArea: [{ required: true, message: "请输入公摊面积" }],
  section: [
    { required: true, message: "请输入房间户型" },
    {
      validator: (rule, value, callback) => {
        if (!form.value.section || !form.value.hall || !form.value.toilet) {
          callback(new Error("请输入房间户型"));
        } else {
          callback();
        }
      },
    },
  ],
});

// 公房,公建配套,商品房,售后公房
const housingPropertyOptions = [
  { label: "公房", value: "公房" },
  { label: "公建配套", value: "公建配套" },
  { label: "商品房", value: "商品房" },
  { label: "售后公房", value: "售后公房" },
];

const feeList = ref([]);

const handleRentBlur = (e) => {
  form.value.rent = parseFloat(e.target.value) + "";
};
// 获取收费列表
const getFeeList = () => {
  selectChargingItem({
    roomId: props.row.id,
  }).then(({ data }) => {
    feeList.value = data;
  });
};

const bindFeeModel = ref(false);
const ids = ref([]);
const addFeeHandle = () => {
  bindFeeModel.value = true;
  ids.value = [props.row.id];
};

const memberList = ref([]);
const getMemberList = () => {
  getCommunityMemberPage({
    roomId: props.row.id,
    pageNo: 1,
    pageSize: 1000,
  }).then(({ data }) => {
    memberList.value = data.records;
  });
};

onMounted(() => {
  console.log("[ row ] >", props.row);
  console.log("[ curFloor ] >", props.building);
  // 根据根据楼栋id获取详情
  if (isEdit.value) {
    form.value = { ...toRaw(props.row) };
    getFeeList();
    getMemberList();
  } else {
    // 获取当前楼栋楼层
    getFloorPage({
      id: props.building.id,
      pageNo: 1,
      pageSize: 1,
    }).then(({ data }) => {
      if (data.records[0]) {
        building.value = data.records[0];
        form.value.communityId = building.value.communityId;
        form.value.floorId = building.value.id;
      } else {
        ElMessage.error("楼栋不存在");
      }
    });
  }
});

const closeHandle = () => {
  model.value = false;
};
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = {
        ...form.value,
        communityId: form.value.communityId,
        floorId: form.value.floorId,
      };
      if (isEdit.value) {
        params.id = props.row.id;
      }
      if (form.value.rent) {
        params.rent = parseFloat(form.value.rent);
      }
      const api = isEdit.value ? updateBuildingRoom : saveBuildingRoom;
      api(params).then(() => {
        ElMessage({
          message: isEdit.value ? "编辑成功" : "添加成功",
          type: "success",
        });
        isDetail.value = true;
        closeHandle();
        emit("submit");
      });
    }
  });
};
</script>

<style scoped>
.el-input-number {
  width: 100%;
}
</style>
